import React from 'react'
import UserModel from "../../../model/user";
import Admin from "../../../layout/Admin";
import {Checkbox, DatePicker, Select, Table} from "antd";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import moment from "moment";
import {defaultEnd, defaultStart} from "../user-total/user-total";
const {RangePicker} = DatePicker

class UserHitCount extends React.Component {
    constructor(props) {
        super(props)
        this.model = new UserModel()
        this.state = {
            sort: 0,
            flag: 1,
            p: 0,
            list: [],
            start: defaultStart,
            end: defaultEnd,
            timeCheck: false,
        }
        this.columns = [
            // Count: 3
            // Createt: 1613808653
            // Flag: 1
            // Id: 92
            // Title: "踢球学成语2"
            {
                title: '标题',
                dataIndex: 'Title',
            },
            {
                title: '点击次数',
                dataIndex: 'Count',
            },
            {
                title: 'Id',
                dataIndex: 'Id',
            },
            // {
            //     title: '最近点击时间',
            //     dataIndex: 'Createt',
            //     render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm')
            // }
        ]
    }

    componentDidMount() {
        this.all()

    }
    all = () => {
        // type GetTongJiDetailJson struct {
        //     Sorttype int `binding:"min=0,max=1"` //排序规则，0=按点击量，1=按点击时间
        //     Flag     int `binding:"min=1,max=4"` //标识，1=视频，2=资讯，3=社区,4=比赛视频直播
        //     P        int `binding:"min=0"`
        // }
        const params = {
            P: this.state.p,
            Sorttype: this.state.sort,
            Flag: this.state.flag,
            Starttime: 0,
            Endtime: 0,
        }
        if (this.state.timeCheck) {
            // 2006-01-02 15:04:05
            const start = this.state.start.format('X')
            const end = this.state.end.format('X')
            params.Starttime = parseInt(start)
            params.Endtime = parseInt(end)
        }
        this.model
            .hitCount(params)
            .then((res) => {
                this.setState({
                    list: res.data.ok,
                })
            })
    }

    prevPage = () => {
        this.setState({
            p: this.state.p - 1,
        }, () => this.all())
    }

    nextPage = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    onFlagSelect = (value, option) => {
        this.setState({
            flag: value,
            p: 0,
        }, () => this.all())
    }

    onSortSelect = (value, option) => {
        this.setState({
            sort: value,
            p: 0,
        }, () => this.all())
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        this.setState({
            start,
            end,
        }, () => {
            // this.get()
            this.all()
        })
    }

    render() {
        return <Admin>
            <div className='list-container'>
                <div style={{marginBottom: '8px',}}>
                    <span>类型：</span>
                    <Select
                        style={{marginRight: '8px', width: 200}}
                        defaultValue={this.state.flag}
                        value={this.state.flag}
                        onChange={(val, opt) => this.onFlagSelect(val, opt)}
                    >
                        {/*//标识，1=视频，2=资讯，3=社区,4=比赛视频直播*/}
                        <Select.Option value={1}>视频</Select.Option>
                        <Select.Option value={2}>资讯</Select.Option>
                        <Select.Option value={3}>社区</Select.Option>
                        <Select.Option value={4}>比赛直播</Select.Option>
                    </Select>
                    <span>排序：</span>
                    <Select
                        style={{marginRight: '8px', width: 200}}
                        defaultValue={this.state.sort}
                        value={this.state.sort}
                        onChange={(val, opt) => this.onSortSelect(val, opt)}
                    >
                        {/*0=按点击量，1=按点击时间*/}
                        <Select.Option value={0}>按点击量</Select.Option>
                        <Select.Option value={1}>按点击时间</Select.Option>
                    </Select>
                </div>
                <div style={{marginBottom: '8px',}}>
                    <Checkbox
                        checked={this.state.timeCheck}
                        onChange={() => {
                            this.setState({
                                timeCheck: !this.state.timeCheck,
                                p: 0,
                            }, () => {
                                this.all()
                            })
                        }}
                    >
                        时间:
                    </Checkbox>
                    <RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={this.onDateChange}
                        defaultValue={[
                            this.state.start,
                            this.state.end,
                        ]}
                        disabled={this.state.timeCheck === false}
                    />
                </div>
                <Table
                    dataSource={this.state.list}
                    columns={this.columns}
                    pagination={false}
                    rowKey={(record, index) => index}
                />
                <PaginationFooter
                    pageIndex={this.state.p}
                    prevPage={this.prevPage}
                    nextPage={this.nextPage}
                />
            </div>
        </Admin>
    }
}

export default UserHitCount